/** * 标签管理  */
<template>
  <div class="container bdradius4">
    <Card dis-hover class="pt20">
      <div
        class="flex bgFFF space-between color000 pl20 btn-section"
        style="position: relative; z-index: 10"
      >
        <div class="flex flex-y-center">
          <button-menu @handleAdd="saveHandle()"></button-menu>
        </div>
      </div>
    </Card>
    <!-- 标签组列表 -->
    <div class="list ml20 mr20 pt16 pb45">
      <div
        class="label-box"
        v-for="(item, index) in listData"
        :key="index"
        :class="index == listData.length - 1 ? '' : 'mb20'"
      >
        <!-- 标签组title -->
        <div class="label-title">
          <span class="labels">{{ item.tagName }}</span>
        </div>
        <!-- 标签组下的列表 -->
        <div class="label-box-info flex space-between">
          <div class="flex flex-wrap" style="width:93%">
            <div
              class="titles"
              v-for="(child, childIndex) in item.children"
              :key="childIndex"
            >
              {{ child.tagName }}
            </div>
          </div>

          <div class="mt6" style="width:5%;display: flex;justify-content: space-between;">
            <!-- <Icon type="md-create" size="14" color="#1577FE" class="curPointer"
                  v-if="buttonRight.find(item => item.name == 'bianji')" @click="bianji(item)"/> -->
            <img
              src="../../../assets/img/bj2.png"
              alt=""
              style="
                width: 16px;
                height: 16px;
                cursor: pointer;
              "
              v-if="buttonRight.find((item) => item.name == 'bianji')"
              @click="bianji(item)"
            />
            <Icon
              type="ios-trash"
              size="21"
              color="#1577FE"
              class="curPointer"
              v-if="buttonRight.find((item) => item.name == 'shanchu')"
              @click="shanchubq(item)"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 添加or编辑 -->
    <base-drawers
      v-model="addgoodamod"
      :title="modtitle"
      :loading="bcloading"
      @input="addcolen"
      @drawerSubmit="addgoods"
    >
      <div>
        <Form
          ref="formInline"
          :model="addbj"
          :rules="ruleInline"
          :label-width="90"
        >
          <FormItem prop="tagName" label="标签组名称">
            <Input
              v-model="addbj.tagName"
              placeholder="请输入标签组名称"
              maxlength="15"
              show-word-limit
              style="width: 270px"
            />
          </FormItem>
        </Form>
        <div>
          <div class="color999 line16 mb8">标签</div>
          <div v-for="(item, index) in tagsList" class="mb8">
            <Input
              v-model="item.tagName"
              placeholder="请输入标签名称"
              maxlength="15"
              show-word-limit
              style="width: 360px"
            />
            <Icon
              type="md-close"
              color="#bbbbbb"
              size="12"
              class="ml10 curPointer"
              @click="biaoqxxx(index)"
            />
          </div>
          <div
            class="line20 mt10 curPointer"
            style="color: #0085ff"
            @click="addbiaoq"
          >
            <Icon type="md-add" size="12" />
            <span class="ml5">添加标签</span>
          </div>
        </div>
      </div>
    </base-drawers>
  </div>
</template>
<script>
import BaseDrawers from "_c/base-drawers/base-drawers";

export default {
  components: {
    BaseDrawers,
  },
  data() {
    return {
      buttonRight: [],
      ruleInline: {
        tagName: {
          required: true,
          message: "标签组名称不能为空",
          trigger: "change",
        },
      },
      addbj: {
        tagName: "",
        parentId: "0",
        orderNo: 1,
      },
      tagsList: [],

      addgoodamod: false,
      modtitle: "",
      bcloading: false,

      labelInput: "", // 标签表单值
      EditLabelId: "", // 当前编辑的标签数据
      EditLabelChildId: "", // 当前编辑的标签数据
      ruleValidate: {
        ruleValidate: [
          {
            required: true,
            message: "请填写标签组名称",
            trigger: "blur",
          },
        ],
      },
      type: "添加", // 当前操作的状态
      listData: [], // 标签列表数据
    };
  },
  watch: {},
  created() {
    let buttonMenu = this.buttonMenu(this.$route.name);
    this.buttonRight = buttonMenu.buttonRight;

    this.loadData();
  },
  methods: {
    // 删除标签组
    shanchubq(item) {
      this.$Modal.confirm({
        title: "提示",
        content: "删除后，已添加到参保人员信息的标签也一起删除",
        onOk: () => {
          this.APIS.tagsGroup({
            id: item.id,
          }).then((res) => {
            if (res.code == 20000) {
              this.addgoodamod = false;
              this.resetData();
              this.loadData();
              this.$Message.success("删除成功！");
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    // 新增编辑弹框内标签右边的x
    biaoqxxx(e) {
      if (this.modtitle != "新建标签组") {
        this.$Modal.confirm({
          title: "提示",
          content: "删除后，已添加到参保人员信息的标签也一起删除",
          onOk: () => {
            this.tagsList.splice(e, 1);
          },
        });
      }else{
        this.tagsList.splice(e, 1);
      }
    },
    // 新增编辑弹框内点击添加标签按钮
    addbiaoq() {
      this.tagsList.push({
        tagName: "",
      });
    },
    // 新建编辑弹框取消按钮
    addcolen() {
      this.addgoodamod = false;
      this.resetData();
      this.bcloading = false;
    },
    // 新建编辑弹框确定按钮
    addgoods() {
      this.$refs["formInline"].validate((valid) => {
        if (valid) {
          if (this.tagsList.length == 0) {
            this.$Message.error("请至少添加一个标签项");
          } else {
            if (this.tagsList.filter((item) => !item.tagName).length) {
              this.$Message.warning("请检查标签，标签不能为空");
            } else {
              let data = {
                tagsList: JSON.parse(JSON.stringify(this.tagsList)),
              };
              data.tagsList.unshift(this.addbj);
              data.tagsList.map((item, index) => {
                item.orderNo = index + 1;
              });
              console.log(data);
              var tslist = [];
              for (let i = 0; i < data.tagsList.length; i++) {
                if (i > 0) {
                  tslist.push(data.tagsList[i].tagName);
                }
              }
              var result = Array.from(new Set(tslist));
              if (tslist.length !== result.length) {
                this.$Message.error("标签重复");
                return false;
              }
              if (this.modtitle == "新建标签组") {
                this.bcloading = true;
                this.APIS.tagAdd(data).then((res) => {
                  this.bcloading = false;
                  if (res.code == 20000) {
                    this.$Message.success("创建成功！");
                    this.addgoodamod = false;
                    this.resetData();
                    this.loadData();
                  } else {
                    this.$Message.error(res.message);
                  }
                });
              } else {
                for (let i = 0; i < data.tagsList.length; i++) {
                  if (!data.tagsList[i].parentId) {
                    data.tagsList[i].parentId = this.addbj.id;
                  }
                }
                // console.log(data)
                // console.log(this.addbj.id)
                // console.log(this.listData)
                this.bcloading = true;
                this.APIS.tagsgroup(data).then((res) => {
                  this.bcloading = false;
                  if (res.code == 20000) {
                    this.$Message.success("编辑成功！");
                    this.addgoodamod = false;
                    this.resetData();
                    this.loadData();
                  } else {
                    this.$Message.error(res.message);
                  }
                });
              }
            }
          }
        }
      });
    },
    resetData() {
      this.addbj = {
        tagName: "",
        parentId: "0",
        orderNo: 1,
      };
      this.tagsList = [];
    },
    // 标签列右侧的编辑按钮
    bianji(item) {
      this.addgoodamod = true;
      this.modtitle = "编辑标签组";
      this.addbj = {
        tagName: item.tagName,
        id: item.id,
        parentId: item.parentId,
        orderNo: item.orderNo,
      };
      this.tagsList = [];
      for (let i = 0; i < item.children.length; i++) {
        this.tagsList.push({
          tagName: item.children[i].tagName,
          id: item.children[i].id,
          parentId: item.children[i].parentId,
          orderNo: item.children[i].orderNo,
        });
      }
    },
    // 点击添加标签组
    saveHandle() {
      this.$refs["formInline"].resetFields();
      this.bcloading = false;
      this.addgoodamod = true;
      this.resetData();
      this.modtitle = "新建标签组";
    },
    // 初始化标签列表
    loadData() {
      this.APIS.tagList().then((res) => {
        if (res.code == 20000) {
          this.listData = this.handleTree(res.data);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "style.less";

/deep/.ivu-form-item-label {
  white-space: nowrap;
}
/deep/ .ivu-drawer-body {
  padding: 30px 50px;
}

/deep/ .ivu-form-item {
  margin-bottom: 20px;
}

/deep/ .ivu-modal-body {
  padding: 20px 30px !important;
  max-height: 500px;
  overflow: auto;
}

/deep/ .ivu-modal-footer {
  border-top: 1px solid #e4e6e9;
  background: #f8f8f8;
  width: 100%;
}

/deep/ .ivu-icon-ios-close {
  color: #fff !important;
}

/deep/ .ivu-modal-header-inner {
  color: #fff !important;
}

/deep/ .ivu-modal-header {
  background: #3691d7;
  border-radius: 5px 5px 0 0;
}

/deep/ .ivu-input-suffix {
  background: #3691d7;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

/deep/ .ivu-icon-ios-search {
  color: #fff;
}

/deep/ .ivu-input-with-suffix {
  height: 100% !important;
}

/*/deep/ .ivu-btn > span {
  display: flex !important;
  align-items: center !important;
}*/

/deep/ .ivu-checkbox-default {
  margin: 0 !important;
}
</style>
